<template>
  <div>
    <div class="btn">
      <el-button type="primary" round size="mini" @click="dialogFormVisible = true">新增产品编码</el-button>
      <el-button type="danger" round size="mini" @click="delArr">删除</el-button>
    </div>
    <div class="inp">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="small" @change="serch" v-model="name"></el-input>
    </div>
    <el-table
    ref="codeRef"
    :data="codeList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="codeHandleSelectionChange"
    border>
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
    type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="sort"
      label="商品类目"
      width="100">
    </el-table-column>
    <el-table-column
      prop="spid"
      label="商品编码"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="mould"
      label="模具号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="supplier"
      label="供应商"
      width="100">
    </el-table-column>
    <el-table-column
      prop="styleid"
      label="款号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="shopid"
      label="电商款号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="alloy"
      label="成色"
      width="100">
    </el-table-column>
    <el-table-column
      prop="property"
      label="属性"
      width="100">
    </el-table-column>
    <el-table-column
      prop="stock"
      label="石料"
      width="100">
    </el-table-column>
    <el-table-column
      prop="style"
      label="款式"
      width="100">
    </el-table-column>
    <el-table-column
      prop="weight"
      label="参考重量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="count"
      label="计算库存"
      width="100">
    </el-table-column>
    <el-table-column
      prop="valcost"
      label="成本计价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="成本价"
      label="成本价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="valprice"
      label="销售计价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="price"
      label="标签单价"
      width="100">
    </el-table-column>
    <el-table-column
      prop="wage"
      label="销售工费"
      width="100">
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
      <el-button
        size="mini"
        @click="handleEdit(scope.row);dialogFormVisible = true">详细信息</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog title="新增产品编码" :visible.sync="dialogFormVisible" width="70%" center>
      <el-form :inline="true" class="demo-form-inline" :model="codeForm" ref="codeFormRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="商品类型:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品编码:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="商品编码:">
              <el-input v-model="codeForm.spid" size="mini" style="width:520px !important"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="模具号:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="款号:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电商号:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="成色:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="石料:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="属性:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="款式:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="玉石类" value="玉石类"></el-option>
                <el-option label="镶嵌类" value="镶嵌类"></el-option>
                <el-option label="素金类" value="素金类"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="颜色:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="别名1:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="别名2:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="参考重量:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手寸:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="成本计价:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="重量" value="重量"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成本价:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="市场价:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="销售计价:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="重量" value="重量"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签单价:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="销售工费计价:">
              <el-select v-model="codeForm.sort" size="mini" style="width:100px !important">
                <el-option label="重量" value="重量"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="标签单价:">
              <el-input v-model="codeForm.spid" size="mini" style="width:100px !important"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="销售附加费:">
              <el-input v-model="codeForm.spid" size="mini" style="width:100px !important"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="库存计算:" style="padding-right:36px">
              <el-radio v-model="radio" label="1">备选项</el-radio>
              <el-radio v-model="radio" label="2">备选项</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="提成分类:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="重量" value="重量"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类1:">
              <el-select v-model="codeForm.sort" size="mini">
                <el-option label="重量" value="重量"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类2:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类3:">
              <el-input v-model="codeForm.spid" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="上传图片" style="padding-left:38px">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleimageChange"
            :on-success="handleSuccess">
              <i slot="default" class="el-icon-plus"></i>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false;save()">保 存</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCodeApi,codeDelApi,insertApi,serchApi} from '@/http/GoodsSetApi'
export default {
  name:'ProductCodeTable',
  data(){
    return{
      codeList:[],
      codeForm:{},
      dialogFormVisible:false,
      radio:'1',
      //上传
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      name:'',
    }
  },
  created(){
    this.getCodeList()
  },
  methods:{
    //获取产品编码列表
    getCodeList(){
      getCodeApi()
      .then(res => {
        if(res.status !== 200){
          this.$message.error('获取列表失败')
          console.log(res.status);
          return
        }
        this.codeList = res.data.data
      })
      .catch(err => {
        console.log(err);
      })
    },
    codeHandleSelectionChange(){},
    //详细信息
    handleEdit(){

    },
    // 删除
    handleDelete(row){
      codeDelApi(row.id)
      .then(res => {
        console.log(res.data.code);
        if(res.data.code != 200){
          this.$message.error('删除失败'),
          console.log(res);
          return
        }
        this.$message({
          type:'success',
          message:'删除成功'
        })
        this.getCodeList()
      })
      .catch(err => {
        this.$message.error('删除失败'),
        console.log(err);
      })
    },
    //新增
    save(){
      console.log(this.$refs.codeFormRef);
      const {data : res} = insertApi(this.codeForm)
      if(res.code !== 200) {
        return this.$message.error('保存失败')
      }
      this.$message({
        type:'success',
        message:'保存成功'
      })
    },
    //批量删除
    delArr(){

    },
    //查询
    async serch(){
      
      const {data:res} = await serchApi({limit:5,name:this.name,page:1});
      console.log(res);
    },
    //上传
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleimageChange(file,fileList){
      console.log(file);
      console.log(fileList);
    },
    handleSuccess(response){
      console.log('chenggong',response.data);
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="scss" scoped>
  .btn,.inp{
    float: left;
  }
  .inp{
    margin-left: 10px;
    width: 200px;
  }
  .el-col{
    text-align: right;
  }
  .el-input{
    width: 198px !important;
  }
</style>